import React, { Component } from 'react';
import moment from 'moment';

import { Form, Input, Button, Checkbox, Row, Col, Upload, Cascader, Select, Radio, DatePicker, Tabs, TimePicker, Table } from 'antd';
import { LoadingOutlined, PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;


import axios from '@src/lib/axios';
import Ckeditor from '@src/components/ckeditor/Ckeditor';

import Header from './Header';
import Travel from './trip/Travel';
import UploadGroup from './upload/UploadGroup';
import UploadBox from './upload/Upload';
import Calendar from './calendar';
import '@src/style/product.scss';


export default class Product extends Component {
    //static contextType = ApiContext;
    formRef = React.createRef();
    state = {
        params: {
            product_title: '',
            bright_spot: [ '1', '2', '3' ],
            start_time: '',
            end_time: '',
            price_set: [
                {
                    "name":"套餐1名称",
                    "list":[
                        {
                            "date":"2020-4-21",
                            "adult_cost_price":"1",
                            "adult_sale_price":"1",
                            "adult_sale_stock":"2",
                            "children_cost_price":"1",
                            "children_sale_price":"3",
                            "children_number":"4",
                            "room_diff_price":"1"
                        },
                        {
                            "date":"2020-4-23",
                            "adult_cost_price":"1",
                            "adult_sale_price":"1",
                            "adult_sale_stock":"2",
                            "children_cost_price":"1",
                            "children_sale_price":"3",
                            "children_number":"4",
                            "room_diff_price":"1"
                        }
                    ]
                }
            ],
            main_image: '',
            main_image_two: '',
            main_image_three: '',
            main_image_four: '',
            main_image_five: '',
            computer_desc: '',
            origin_address: '',
            destination_addresses: '',
            travel_person_type: '',
            theme: '人文/赏景',
            trip_day: 1,
            trip_night: 0,
            select: 'china',
            sale_type: 1,
            confirm_type: 1,
            register_days: 0,
            collect_time: moment('09:20', 'HH:mm'),
            confirm_upload: 1,
            confirm_custom_day: 2,
            trip: [
                {
                    price_apply: [],
                    enable_timeline: 1,
                    trip_info: [
                        {
                            day_description: '',
                            trip_title: '',
                            place: [],
                            trip_content: []
                        }
                    ]
                }
            ]
        },
        calendarVisible: false,
        imageUrl: '',
        isShow: true,
        trafficList: [{}, {}],
        dateRange: [],
        packageActiveKey: 0,
        tripActiveKey: 0,
    };

    onFinish = (value) => {
        console.log(value)
    };
    onFinishFailed = (value) => {
        console.log(value)
    };

    onChangeHandler = (k, v) => {
        this.setState({ [k]: v });
    };

    getGoodsImg = (imgList) => {
        Object.assign(this.state.params, {
            main_image: imgList[0] || '',
            main_image_two: imgList[1] || '',
            main_image_three: imgList[2] || '',
            main_image_four: imgList[3] || '',
            main_image_five: imgList[4] || '',
        });
        console.log(this.state.params);
    };
    ckChangeHandler = (instan) => {
        this.state.params.computer_desc = instan.getData();
        this.formRef.current.validateFields(['pcDesc']);
    };

    dateRangeChange = (date) => {
        !date && (date = []);
        this.state.dateRange = date;
        if (date.length === 2) {
            this.state.params.start_time = moment(date[0]).format('YYYY-MM-DD');
            this.state.params.end_time = moment(date[1]).format('YYYY-MM-DD');
        } else {
            this.state.params.start_time = '';
            this.state.params.end_time = '';
        }
        this.setState({});
    };

    getCalendar = (data) => {
        this.state.params.price_set[this.state.packageActiveKey].list = data;
        //this.setState({});
    };

    packageSwitch = (activeKey)=> {

    };
    delPackage = (index)=> {
        let { params, packageActiveKey } = this.state;
        packageActiveKey = packageActiveKey > 0? packageActiveKey - 1 : 0;
        params.price_set.splice(index, 1);
        this.setState({ params, packageActiveKey });
    };

    addPackage = () => {
        const { params } = this.state;
        const activeKey = params.price_set.length + 1;
        params.price_set.push({ name: `套餐${activeKey}名称`, list: [] });
        this.setState({ params });
    };
    addTrip = () => {
        const trip = this.formRef.current.getFieldValue('trip');
        console.log(trip)
        trip.push({
            price_apply: [],
            enable_timeline: 1,
            trip_info: [
                {
                    day_description: '',
                    trip_title: '',
                    place: [],
                    trip_content: []
                }
            ]
        })
        this.formRef.current.setFieldsValue({
            trip: trip
        });
    };
    delTrip = () => {
        const trip = this.formRef.current.getFieldValue('trip');
        const { tripActiveKey } = this.state;
        trip.splice(tripActiveKey, 1);
        this.setState({ tripActiveKey: tripActiveKey > 1? tripActiveKey - 1 : 0  })
        this.formRef.current.setFieldsValue({
            trip: trip
        });
    }

    componentDidMount() {
        console.log(this.props.history)

    }
    render() {
        let { trafficList, dateRange, calendarVisible, params, packageActiveKey, tripActiveKey } = this.state;



        const traffic = [{ label: '飞机' }, { label: '火车' }, { label: '汽车' }, { label: '轮船' }, { label: '其它' } ];

        const TrafficBox = ({ k1, k2 }) => {
            return (
                <div className="traffic-box">
                    <span>
                        <Select
                            allowClear={true}
                            style={{ width: 120 }}
                            placeholder="请选择"
                            onChange={() => {}}
                        >
                            {
                                traffic.map((item, i) => (<Option key={i} value={item.label}></Option>))
                            }
                        </Select>
                    </span>
                    <span className="name"><Input placeholder="第一站"/></span>
                    <span className="close-btn"><CloseCircleOutlined /></span>
                </div>
            )
        };
        let data = [
            {
                key: '0',
                "before_trip":"出行前,3-0:3日以上,2-1:2日到1日,0:出发当日,如果取消政策是节假日,这里存节假日商品描述",
                "buyers_dedit":"买家违约金,按照百分比算",
                "merchant_dedit":"商家违约,按照百分比算,最低百分之5,如果买家违约金超过百分之5，则同买家违约金比例",
                "clause_type":"1对等取消,2节假日"
            }, {
                key: '1',
                "before_trip":"出行前,3-0:3日以上,2-1:2日到1日,0:出发当日,如果取消政策是节假日,这里存节假日商品描述",
                "buyers_dedit":"买家违约金,按照百分比算",
                "merchant_dedit":"商家违约,按照百分比算,最低百分之5,如果买家违约金超过百分之5，则同买家违约金比例",
                "clause_type":"1对等取消,2节假日"
            }, {
                key: '2',
                "before_trip":"出行前,3-0:3日以上,2-1:2日到1日,0:出发当日,如果取消政策是节假日,这里存节假日商品描述",
                "buyers_dedit":"买家违约金,按照百分比算",
                "merchant_dedit":"商家违约,按照百分比算,最低百分之5,如果买家违约金超过百分之5，则同买家违约金比例",
                "clause_type":"1对等取消,2节假日"
            }
        ];
        let cost_explain = [
            {
                key: '0',
                "type":1,
                "value": [1],
                "cost_description":"11112"
            }, {
                key: '1',
                "type":2,
                "value": [1],
                "cost_description":"11112"
            }, {
                key: '2',
                "type":3,
                "value": [1],
                "cost_description":"11112"
            }, {
                key: '3',
                "type":4,
                "value": [1],
                "cost_description":"11112"
            }, {
                key: '4',
                "type":5,
                "value": [1],
                "cost_description":"11112"
            }, {
                key: '5',
                "type":6,
                "value": [1],
                "cost_description":"11112"
            }
        ];

        let TripDays = () => {
            const trip_day = this.formRef.current? this.formRef.current.getFieldValue('trip_day') : 1;
            const days = [];
            for (let i = 0; i < trip_day; i++) {
                days.push(

                );
            }
            return days;
        }

        return (
            <div style={{paddingBottom: '100px'}}>
                <Calendar
                    date={dateRange}
                    visible={calendarVisible}
                    priceList={params.price_set[packageActiveKey].list}
                    emitChange={this.getCalendar}
                    setVisible={(v) => this.onChangeHandler('calendarVisible', v)}
                />
                <Header></Header>
                <div className="container">
                    <Form
                        ref={this.formRef}
                        labelCol={{ span: 2 }}
                        wrapperCol={{ span: 20 }}
                        name="basic"
                        initialValues={this.state.params}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Row className="fields-box">
                            <Col span={24} className="col-title"><h2>基本信息</h2></Col>
                            <Col span={24}>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        Submit
                                    </Button>
                                </Form.Item>
                                <Form.Item
                                    label="商品标题"
                                    name={"product_title"}
                                    validateTrigger="onBlur"
                                    rules={[{ required: true, message: '商品标题必填！' }]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="商品亮点"
                                >
                                    <Form.Item
                                        name={['bright_spot', 0]}
                                    >
                                        <Input placeholder="亮点1"/>
                                    </Form.Item>
                                    <Form.Item
                                        name={['bright_spot', 1]}
                                    >
                                        <Input placeholder="亮点2"/>
                                    </Form.Item>
                                    <Form.Item
                                        name={['bright_spot', 2]}
                                    >
                                        <Input placeholder="亮点3"/>
                                    </Form.Item>
                                    <Form.Item
                                        name={['bright_spot', 3]}
                                    >
                                        <Input placeholder="亮点4"/>
                                    </Form.Item>
                                </Form.Item>
                                <Form.Item
                                    label="商家编码"
                                    name={'company_code'}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="商品图片"
                                    name='goodsImg'
                                    validateTrigger="onSubmit"
                                    rules={[
                                        { required: true, validator: (rule, value) => {
                                                let { main_image, main_image_two } = this.state.params;
                                                if (main_image && main_image_two) {
                                                    return Promise.resolve();
                                                } else {
                                                    return Promise.reject('请上传商品图片！');
                                                }
                                            }}
                                    ]}
                                >
                                    <UploadGroup
                                        num={5}
                                        span={3}
                                        onChange={this.getGoodsImg}
                                    >
                                    </UploadGroup>
                                </Form.Item>
                                <Form.Item
                                    label="电脑端描述"
                                    name="pcDesc"
                                    validateTrigger="onSubmit"
                                    rules={[
                                        { required: true, validator: (rule, value) => this.state.params.computer_desc? Promise.resolve() : Promise.reject('请填写电脑端描述！') }
                                    ]}
                                >
                                    <Ckeditor changeHandler={this.ckChangeHandler}></Ckeditor>
                                </Form.Item>
                            </Col>
                        </Row>
                        <div style={{height: '20px'}}></div>
                        <Row className="fields-box">
                            <Col span={24} className="col-title"><h2>产品基本信息</h2></Col>
                            <Col span={24}>
                                <Form.Item
                                    label="出发地"
                                    name="origin_address"
                                    rules={[
                                        { required: true, message: '出发地是必选项！' }
                                    ]}
                                >
                                    <Cascader options={[{value: 'zhejiang', label: 'Zhejiang',}]} onChange={() => {}} placeholder="请选择" />
                                </Form.Item>
                                <Form.Item
                                    name="destination_addresses"
                                    label="目的地"
                                    rules={[
                                        { required: true, message: '目的地是必选项！' }
                                    ]}
                                >
                                    <Cascader options={[{value: 'zhejiang', label: 'Zhejiang',}]} onChange={() => {}} placeholder="请选择" />
                                </Form.Item>
                                {/*<Form.Item
                                    label="玩法"
                                >
                                    <Cascader options={[{value: 'zhejiang', label: 'Zhejiang',}]} onChange={() => {}} placeholder="请选择" />
                                </Form.Item>*/}
                                <Col span={24}>
                                    <Row>
                                        <Col span={10}>
                                            <Form.Item
                                                label="出游人群"
                                                labelCol={{ span: 5 }}
                                                name="travel_person_type"
                                            >
                                                <Select
                                                    showSearch
                                                    allowClear={true}
                                                    style={{ width: 300 }}
                                                    placeholder="请选择"
                                                    optionFilterProp="children"
                                                    onSearch={() => {}}
                                                >
                                                    <Option value="亲子">亲子</Option>
                                                    <Option value="情侣">情侣</Option>
                                                    <Option value="朋友/同事">朋友/同事</Option>
                                                    <Option value="父母">父母</Option>
                                                </Select>
                                            </Form.Item>
                                        </Col>
                                        <Col span={10}>
                                            <Form.Item
                                                label="主题"
                                                name="theme"
                                            >
                                                <Select
                                                    showSearch
                                                    allowClear={true}
                                                    style={{ width: 300 }}
                                                    placeholder="请选择"
                                                    onSearch={() => {}}
                                                >
                                                    <Option value="人文/赏景">人文/赏景</Option>
                                                    <Option value="古镇游">古镇游</Option>
                                                    <Option value="度假村">度假村</Option>
                                                    <Option value="海岛游">海岛游</Option>
                                                    <Option value="温泉">温泉</Option>
                                                    <Option value="游学">游学</Option>
                                                    <Option value="滑雪">滑雪</Option>
                                                    <Option value="禅修">禅修</Option>
                                                    <Option value="自驾">自驾</Option>
                                                    <Option value="购物">购物</Option>
                                                    <Option value="都市游">都市游</Option>
                                                    <Option value="酒店控">酒店控</Option>
                                                    <Option value="其他">其他</Option>
                                                </Select>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Col>
                                <Form.Item label="行程天数">
                                    <Form.Item
                                        noStyle
                                        name="trip_day"
                                    >
                                        <Select
                                            style={{ width: 130 }}
                                            placeholder="请选择"
                                            onChange={() => {}}
                                        >
                                            <Option value={1}>1</Option>
                                            <Option value={2}>2</Option>
                                            <Option value={3}>3</Option>
                                            <Option value={4}>4</Option>
                                            <Option value={5}>5</Option>
                                            <Option value={6}>6</Option>
                                            <Option value={7}>7</Option>
                                            <Option value={8}>8</Option>
                                            <Option value={9}>9</Option>
                                            <Option value={10}>10</Option>
                                            <Option value={11}>11</Option>
                                            <Option value={12}>12</Option>
                                            <Option value={13}>13</Option>
                                            <Option value={14}>14</Option>
                                            <Option value={15}>15</Option>
                                            <Option value={16}>15日以上</Option>
                                        </Select>
                                    </Form.Item>&nbsp;天
                                    <Form.Item
                                        noStyle
                                        name="trip_night"
                                    >
                                        <Select
                                            style={{ width: 130, marginLeft: '20px' }}
                                            placeholder="请选择"
                                            onChange={() => {}}
                                        >
                                            <Option value={0}>0</Option>
                                            <Option value={1}>1</Option>
                                            <Option value={2}>2</Option>
                                            <Option value={3}>3</Option>
                                            <Option value={4}>4</Option>
                                            <Option value={5}>5</Option>
                                            <Option value={6}>6</Option>
                                            <Option value={7}>7</Option>
                                            <Option value={8}>8</Option>
                                            <Option value={9}>9</Option>
                                            <Option value={10}>10</Option>
                                            <Option value={11}>11</Option>
                                            <Option value={12}>12</Option>
                                            <Option value={13}>13</Option>
                                            <Option value={14}>14</Option>
                                            <Option value={15}>15</Option>
                                            <Option value={16}>15日以上</Option>
                                        </Select>
                                    </Form.Item>&nbsp;晚
                                </Form.Item>
                            </Col>
                        </Row>
                        <div style={{height: '20px'}}></div>
                        <Row className="fields-box">
                            <Col span={24} className="col-title"><h2>交易设置</h2></Col>
                            <Col span={24}>
                                <Form.Item
                                    label="售卖方式"
                                    name="sale_type"
                                >
                                    <Radio.Group>
                                        <Radio value={1}>日历商品</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label="资源确认方式"
                                    name="confirm_type"
                                >
                                    <Radio.Group>
                                        <Radio value={1}>即时确认</Radio>
                                        <Radio value={2}>二次确认</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label="可选出发日期"
                                    name="dateRange"
                                    rules={[
                                        { required: true, validator: () => dateRange.length !== 2? Promise.reject('') : Promise.resolve() }
                                    ]}
                                >
                                    <RangePicker
                                        format="YYYY-MM-DD"
                                        disabledDate={(current) => (current && current < moment().subtract(1, 'days').endOf('day'))}
                                        value={dateRange}
                                        onChange={this.dateRangeChange}
                                    />
                                </Form.Item>
                                <Col span={24} className="package-box">
                                    <Col offset={2}><Button type="primary" onClick={this.addPackage}>+增加套餐</Button></Col>
                                    <Form.Item
                                        label="套餐设置"
                                    >
                                        <Tabs
                                            hideAdd
                                            onChange={activeKey => this.onChangeHandler('packageActiveKey', parseInt(activeKey))}
                                            activeKey={packageActiveKey + ''}
                                            type="editable-card"
                                            onEdit={() => {}}
                                        >
                                            {
                                                params.price_set.map((item, index) => (
                                                    <TabPane tab={item.name} key={index + ''} closable={false}>
                                                        {
                                                            params.price_set.length > 1? <Col align="right"><Button type="link" onClick={() => this.delPackage(index)}>删除该套餐</Button></Col> : null
                                                        }
                                                        <Col span={8} className="package-name-box">
                                                            <Form.Item
                                                                label="套餐名称"
                                                                name={['price_set', index, 'name']}
                                                                rules={[
                                                                    { required: true, message: '套餐名称是必填项！' }
                                                                ]}
                                                            >
                                                                <Input />
                                                            </Form.Item>
                                                        </Col>
                                                        <p className="package-tips">套餐名称不得包含意外险、单房差、补差价、单签证、单门票、单接送机、定制、儿童占床/不占床、即时确认、飞猪专线、咨询客服、日历等类似信息。</p>
                                                        <Col span={8}>
                                                            <Form.Item
                                                                label="商家编码"
                                                            >
                                                                <Input/>
                                                            </Form.Item>
                                                            {
                                                                dateRange.length?
                                                                    <Form.Item
                                                                        label="套餐库存"
                                                                    >
                                                                        <Button type="primary" onClick={() => this.onChangeHandler('calendarVisible', true)}>编辑该套餐库存</Button>
                                                                    </Form.Item> : null
                                                            }
                                                        </Col>
                                                    </TabPane>
                                                ))
                                            }
                                        </Tabs>
                                    </Form.Item>
                                </Col>
                                <Col span={8} style={{position: 'relative'}}>
                                    <Form.Item
                                        labelCol={{ span: 6 }}
                                        label="提前报名天数"
                                        name="register_days"
                                        rules={[
                                            { required: true, message: '提前报名天数是必填项！' }
                                        ]}
                                    >
                                        <Input style={{width: '90%'}}/>
                                    </Form.Item>
                                    <span style={{position: 'absolute', right: 0, top: 6}}>&nbsp;天</span>
                                </Col>
                                <Form.Item
                                    label="最晚收客时间"
                                    name="collect_time"
                                    rules={[
                                        { required: true, message: '最晚收客时间是必填项！' }
                                    ]}
                                >
                                    <TimePicker format={'HH:mm'} style={{width: '30%'}}/>
                                </Form.Item>
                                <Form.Item
                                    label="确认书上传时间"
                                    name="confirm_upload"
                                    rules={[
                                        { required: true, message: '确认书上传时间是必选项！' }
                                    ]}
                                >
                                    <Radio.Group>
                                        <Radio value={1}>不上传</Radio>
                                        <Radio value={2}>出行日前5天</Radio>
                                        <Radio value={3}>自定义</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    noStyle
                                    shouldUpdate={(prevValues, currentValues) => prevValues.confirm_upload !== currentValues.confirm_upload}
                                >
                                    {({getFieldValue}) =>
                                        getFieldValue('confirm_upload') === 3?
                                            (<div style={{position: 'relative'}}>
                                                <Form.Item
                                                    labelCol={{ span: 3 }}
                                                    label="出行日前"
                                                    name="confirm_custom_day"
                                                    colon={false}
                                                >
                                                    <Input style={{width: '200px'}}/>
                                                </Form.Item>
                                                <span style={{position: 'absolute', left: '27%', top: '6px'}}>&nbsp;天</span>
                                            </div>) : null
                                    }
                                </Form.Item>
                                <Col span={24}>
                                    <div className="previw-title">
                                        <h2>填写参考行程(右侧填写的内容将同时在电脑端和手机端展示，左侧为App效果预览)</h2>
                                    </div>
                                    <div className="desc-container">
                                        <p>（1）请完全按照商品发布系统的设置进行如实发布。</p>
                                        <p>（2）商品如发布标准行程，请准确描述每天行程的地点、交通方式、吃住行游购娱的内容，正确填写必填项内容。<br/>
                                        跟团游产品请务必填写每日行程描述，自由行产品可填写建议行程。填写了每日行程的商品在手机端获得更多的曝光机会。<br/>
                                            请务必填写手机端其他描述，也将提升在手机端的曝光机会，让发布的宝贝在手机端有更好的展示效果。请点击查看无线端宝贝发布指南  行程结构化指南</p>
                                    </div>
                                    <Form.Item
                                        noStyle
                                        shouldUpdate
                                    >
                                        {({ getFieldValue }) => {
                                            const trip = getFieldValue('trip');
                                            return (
                                                <Row className="journey-preview">
                                                    <Col span={8} className="preivew-container">
                                                        <div className="preview-nav"></div>
                                                    </Col>
                                                    <Col span={16} className="package-info">
                                                        <Col><Button type="primary" onClick={this.addTrip}>+增加行程</Button></Col>
                                                        <Tabs
                                                            onChange={activeKey => this.onChangeHandler('tripActiveKey', parseInt(activeKey))}
                                                            activeKey={tripActiveKey + ''}
                                                            type="editable-card"
                                                        >
                                                            {
                                                                trip.map((item, index) => (
                                                                    <TabPane tab={`行程${index + 1}`} key={index + ''} closable={false}>
                                                                        {
                                                                            trip.length > 1?
                                                                                (<Col align="right"><Button type="link" onClick={this.delTrip}>删除该行程</Button></Col>) : null
                                                                        }
                                                                        <Col span={24} className="package-name-box">
                                                                            <Form.Item
                                                                                label="适用套餐"
                                                                                labelCol={{ span: 4 }}
                                                                                name={['trip', index, 'price_apply']}
                                                                                rules={[
                                                                                    { required: true, type: 'array', message: '适用套餐必选！' }
                                                                                ]}
                                                                            >
                                                                                <Checkbox.Group
                                                                                    options={params.price_set.map(p => ({ label: p.name, value: p.name }))}
                                                                                />
                                                                            </Form.Item>
                                                                            <p className="common-tips">请严格匹配套餐和行程，发现行程与套餐不符将受到处罚！</p>
                                                                        </Col>
                                                                        <Col span={24}>
                                                                            <Form.Item
                                                                                label="是否开启时间轴"
                                                                                labelCol={{ span: 4 }}
                                                                                name={['trip', index, 'enable_timeline']}
                                                                            >
                                                                                <Radio.Group>
                                                                                    <Radio value={1}>是</Radio>
                                                                                    <Radio value={2}>否</Radio>
                                                                                </Radio.Group>
                                                                            </Form.Item>
                                                                            <p className="common-tips">可按照每天的时刻段发布，让买家更清楚了解行程; 每日行程按照实际顺序写</p>
                                                                        </Col>
                                                                        <Col span={24}>
                                                                            <Tabs defaultActiveKey="1">
                                                                                {(() => {
                                                                                    const trip_day = getFieldValue('trip_day');
                                                                                    const days = [];
                                                                                    for (let i = 0; i < trip_day; i++) {
                                                                                        days.push('');
                                                                                    }
                                                                                    return days.map((item, index) => (
                                                                                        <TabPane tab={`第${index + 1}天`} key={index + ''}>
                                                                                            <Col span={18}>
                                                                                                <h3>行程标题</h3>
                                                                                                <Form.Item
                                                                                                    label=" "
                                                                                                    colon={false}
                                                                                                    labelCol={{ span: 4 }}
                                                                                                >
                                                                                                    <Input placeholder={'第一站'}/>
                                                                                                </Form.Item>
                                                                                                <div style={{paddingLeft: '122px'}}>
                                                                                                    { trafficList.map((item, i) => (<TrafficBox key={i}/>)) }
                                                                                                    <Button type="link"><PlusOutlined/>增加地点</Button>
                                                                                                </div>
                                                                                            </Col>
                                                                                            <Col span={18}>
                                                                                                <h3>行程内容</h3>
                                                                                                <Travel/>
                                                                                                <div className="add-trip-info-btn"><Button type="primary">新增行程信息</Button></div>
                                                                                            </Col>
                                                                                        </TabPane>
                                                                                    ))
                                                                                })()}
                                                                            </Tabs>
                                                                        </Col>
                                                                    </TabPane>
                                                                ))
                                                            }
                                                        </Tabs>
                                                    </Col>
                                                </Row>
                                            )
                                        }}
                                    </Form.Item>
                                </Col>
                            </Col>
                        </Row>
                        <div style={{height: '20px'}}></div>
                        <Row className="fields-box">
                            <Col span={24} className="col-title"><h2>取消政策</h2></Col>
                            <Col span={24}>
                                <Form.Item
                                    label="取消政策"
                                >
                                    <Col span={24} className="cancel-tips-box">
                                        <p>如需要在自定义模块对退改政策进行描述，请务必保持与取消政策模块保持一致，违规发布将依据规则进行处置。</p>
                                        <p>订单生效后：</p>
                                        <p>若因买家原因取消订单，买家按照以下标准支付违约费用；</p>
                                        <p>若因卖家原因取消订单，商家不仅退回全款，同时按照以下标准向买家支付违约费用；</p>
                                    </Col>
                                    <Table
                                        columns={[
                                            {
                                                title: '出行前',
                                                key: 'before_trip',
                                                dataIndex: 'before_trip',
                                                render: (text, record, index) => (
                                                    index === 0? <div><Input className="w120"/>日及以上</div> : index === (data.length - 1)? '出发当日' : <div><Input className="w120"/>日至<Input className="w120"/>日</div>
                                                )

                                            }, {
                                                title: '买家违约',
                                                key: 'buyers_dedit',
                                                dataIndex: 'buyers_dedit',
                                                render: () => (<div>收取总费用<Input className="w120"/>%的费用</div>)
                                            }, {
                                                title: '商家违约',
                                                key: 'merchant_dedit',
                                                dataIndex: 'merchant_dedit',
                                                render: () => (<div>支付总费用<Input className="w120"/>%的费用</div>)
                                            }, {
                                                title: '操作',
                                                key: 'index',
                                                render: (text, record, index) => (index > 1 && index < (data.length)? (<a>删除</a>) : null)
                                            }
                                        ]}
                                        dataSource={data}
                                        pagination={false}
                                        bordered
                                    />
                                </Form.Item>
                                <Form.Item
                                    label="费用包含"
                                >
                                    <Col span={24} className="cancel-tips-box">
                                        <p>请如实勾选和说明费用包含/费用不包含/预订须知内容。</p>
                                    </Col>
                                    <Table
                                        columns={[
                                            {
                                                key: '0',
                                                render: (text, record, index) => {
                                                    if (index === 0) {
                                                        return '交通';
                                                    } else if (index === 1) {
                                                        return '住宿';
                                                    } else if (index === 2) {
                                                        return '餐饮';
                                                    } else if (index === 3) {
                                                        return '随团服务人员';
                                                    } else if (index === 4) {
                                                        return '保险';
                                                    } else if (index === 5) {
                                                        return '其它费用';
                                                    }
                                                }

                                            }, {
                                                key: '1',
                                                render: (text, record, index) => {
                                                    if (index === 0) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>行程中所列大巴车服务</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={2}>行程中所列火车、高铁票费用</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={3}>行程中所列船票费用</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 1) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>行程所列酒店住宿费用（酒店默认安排标准2人间）</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 2) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>行程内所列餐食（自理餐除外）</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 3) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>当地中文导游服务</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={2}>中文导游兼职司机服务</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={3}>司机导游用餐补助费用</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 4) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>保险一人一份，具体最终保险名称及相关信息请咨询商家。</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 5) {
                                                        return (
                                                            <div>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    }
                                                }
                                            }
                                        ]}
                                        dataSource={cost_explain}
                                        showHeader={false}
                                        pagination={false}
                                        bordered
                                    />
                                </Form.Item>
                                <Form.Item
                                    label="费用不包含"
                                >
                                    <Table
                                        columns={[
                                            {
                                                key: '0',
                                                render: (text, record, index) => {
                                                    return (
                                                        <div>
                                                            <Checkbox.Group value={record.value}>
                                                                <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>行程中所列自理餐</Checkbox></Col>
                                                                <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={2}>当地参加的自费项目以及以上“费用包含”中不包含的其它项目</Checkbox></Col>
                                                                <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={3}>超出行程</Checkbox></Col>
                                                                <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={3}>其他个人消费</Checkbox></Col>
                                                            </Checkbox.Group>
                                                            <div>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        </div>
                                                    );
                                                }
                                            }
                                        ]}
                                        dataSource={[{key: '0'}]}
                                        showHeader={false}
                                        pagination={false}
                                        bordered
                                    />
                                </Form.Item>
                                <Form.Item
                                    label="预定须知"
                                >
                                    <Table
                                        columns={[
                                            {
                                                key: '0',
                                                render: (text, record, index) => {
                                                    if (index === 0) {
                                                        return '产品说明';
                                                    } else if (index === 1) {
                                                        return '出行须知';
                                                    } else if (index === 2) {
                                                        return '其它';
                                                    }
                                                }

                                            }, {
                                                key: '1',
                                                render: (text, record, index) => {
                                                    if (index === 0) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>由于是拼车业务，所有行程安排已经固定，不接受客人要求临时调整。景点参观时间有相应限制，以行程单确认时间为主。如果您希望灵活调整行程，或在某些景点需要额外延长时间，建议您订购我们的包车产品，满足您的出行需求。</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={2}>此行程需要客人自行前往集合地点集合，请按行程介绍中的行程安排集合时间和地点准时集合。</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={3}>行程中会与其他乘客一起拼车，个人偏好游玩时间不同，请互相理解配合，听从司导统一安排。</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={3}>此产品为拼车一日游产品，成人儿童同价。</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 1) {
                                                        return (
                                                            <div>
                                                                <Checkbox.Group value={record.value}>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>因客人个人原因迟到或未参加行程，视为客人自动放弃行程，恕无法以此为由要求取消本行程或退回行程费用。</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>行程调整：本行程可能由于天气、罢工、安全等原因临时变更或暂停对行程有所调整，请您予以配合。</Checkbox></Col>
                                                                    <Col span={24} style={{marginBottom: '10px'}}><Checkbox value={1}>因客人原因自行在行程中途放弃行程，由此产生的人生安全和产生的额外费用等问题将由客人自行承担，不退行程费用。</Checkbox></Col>
                                                                </Checkbox.Group>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    } else if (index === 2) {
                                                        return (
                                                            <div>
                                                                <Row style={{marginBottom: '10px'}} gutter={15}>
                                                                    <Col span={22}><Input.TextArea rows={3}/></Col>
                                                                    <Col span={2}><Button danger style={{marginBottom: '5px'}}>删除</Button><Button>添加</Button></Col>
                                                                </Row>
                                                                <Button type="primary">添加</Button>
                                                            </div>
                                                        );
                                                    }
                                                }
                                            }
                                        ]}
                                        dataSource={cost_explain}
                                        showHeader={false}
                                        pagination={false}
                                        bordered
                                    />
                                </Form.Item>
                                <Form.Item
                                    label="是否为待定服务"
                                >
                                    <Radio.Group onChange={() => {}} value={() => {}}>
                                        <Radio value={0}>是</Radio>
                                        <Radio value={1}>否</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label="代订服务说明"
                                >
                                    <Col span={24}>本店铺仅提供该旅游产品的代订服务，具体的旅游服务和操作由实际服务提供商 <span style={{display: 'inline-block'}}><Input/></span> 提供。</Col>
                                    <Col span={24} style={{color: '#999'}}>
                                        请在此处填写提供代订服务的旅行产品中，接待消费者并提供服务的完整主体名称。<br/>
                                        作为代订服务，为避免消费者误解，请在描述商品时务必以第三人称介绍，避免出现“我家产品”“我们的产品”这样的用语。<br/>
                                        请参考平台代订服务说明发布规范
                                    </Col>
                                </Form.Item>
                                <Form.Item
                                    label="经营资质"
                                >
                                    <Row gutter={10}>
                                        <Col span={3}>
                                            <UploadBox
                                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                onChangeFile={url => {}}
                                            >
                                            </UploadBox>
                                        </Col>
                                        <Col span={3}>
                                            <UploadBox
                                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                onChangeFile={url => {}}
                                            >
                                            </UploadBox>
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item
                                    label="合作协议"
                                >
                                    <Row gutter={10}>
                                        <Col span={3}>
                                            <UploadBox
                                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                onChangeFile={url => {}}
                                            >
                                            </UploadBox>
                                        </Col>
                                    </Row>
                                </Form.Item>
                            </Col>
                        </Row>
                        <div style={{height: '20px'}}></div>
                        <Row className="fields-box">
                            <Col span={24} className="col-title"><h2>基础设置</h2></Col>
                            <Col span={24}>
                                <Form.Item
                                    label="所在地"
                                >
                                    <Radio.Group onChange={() => {}} value={() => {}}>
                                        <Radio value={0}>国内(含港澳台)</Radio>
                                        <Radio value={1}>其他国家或地区</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label=" "
                                    colon={false}
                                >
                                    <Cascader options={[{value: 'zhejiang', label: 'Zhejiang',}]} onChange={() => {}} placeholder="请选择" />
                                </Form.Item>
                                <Form.Item
                                    label="宝贝分类"
                                >
                                    <Select
                                        mode="multiple"
                                        style={{ width: '100%' }}
                                        placeholder="Please select"
                                        defaultValue={[]}
                                        onChange={() => {}}
                                    >
                                        <Select.OptGroup label="Manager">
                                            <Select.Option value="jack">Jack</Select.Option>
                                            <Select.Option value="lucy">Lucy</Select.Option>
                                        </Select.OptGroup>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    label="上架时间"
                                >
                                    <Radio.Group onChange={() => {}} value={() => {}}>
                                        <Radio value={0}>立刻上架</Radio>
                                        <Radio value={1}>定时上架</Radio>
                                        <Radio value={1}>放入仓库</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label="库存计数"
                                >
                                    <Radio.Group onChange={() => {}} value={() => {}}>
                                        <Radio value={0}>拍下减库存</Radio>
                                        <Radio value={1}>付款减库存</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                        </Row>
                        <div style={{height: '20px'}}></div>
                        <Row className="fields-box">
                            <Col span={24} className="col-title"><h2>流量获取</h2></Col>
                            <Col span={24}>
                                <Form.Item
                                    label="服务承诺"
                                >
                                    <Radio.Group onChange={() => {}} value={() => {}}>
                                        <Radio value={0}>中文服务</Radio>
                                        <Radio value={1}>上门接送</Radio>
                                        <Radio value={1}>纯玩</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        )
    }
}